<template>
  <page-wrap scrollType="bs">
    <template v-slot:RollingTop>
      <div class="statistics-container-top">
        <div class="statistics-container-header">
          <div class="statistics-header-left">
            <img class="img" :src="shopInfo.imgUrl" />
              
          </div>
          <div class="statistics-header-right">
            <div class="header-right-upper">
              <div class="store-name">{{shopInfo.name}}</div>
            </div>
            <div class="header-right-below">
              <div class="time">
                数据同步时间： {{ dayjs().format('YYYY-MM-DD') }}
                {{ dayjs().format('HH:mm:ss') }}
              </div>
              <div class="refresh" @click="restProcess">刷新</div>
            </div>
          </div>
        </div>
      </div>
      <TimeChange @select="onSelectTimeChange"></TimeChange>
    </template>
    <template v-slot:extension>
    </template>

    <div class="statistics-container">
      <div class="statistics-container-main">
        <!-- <div class="statistics-container-summary" @click="jump('turnover')"> -->
        <div class="statistics-container-summary">
          <div class="statistics-summary-upper">
            <div class="summary-upper-left">
              <div class="summary-upper-value">{{ summaryInfo.num1 }}</div>
              <div class="summary-upper-title">营业额 (元)</div>
            </div>
            <div class="summary-upper-right">
              <div class="summary-upper-value">{{ summaryInfo.num2 }}</div>
              <div class="summary-upper-title">实收金额 (元)</div>
            </div>
            <div class="summary-upper-center"></div>
          </div>
          <div class="statistics-summary-below">
            <div class="summary-below-item">
              <div class="summary-below-value">{{ summaryInfo.num3 }}</div>
              <div class="summary-below-title">预约数</div>
              <div class="summary-below-line"></div>
            </div>
            <div class="summary-below-item">
              <div class="summary-below-value">{{ summaryInfo.num4 }}</div>
              <div class="summary-below-title">开台数</div>
              <div class="summary-below-line"></div>
            </div>
            <div class="summary-below-item">
              <div class="summary-below-value">{{ summaryInfo.num5 }}</div>
              <div class="summary-below-title">到店人数</div>
            </div>
          </div>
        </div>
        <div class="statistics-container-business">
          <div class="business-title">营业概览</div>
          <div class="business-main">
            <!-- <div class="business-item" @click="jump('orderlist')"> -->
            <div class="business-item" >
              <div class="business-item-upper">
                <div class="business-upper-title">总订单数</div>
                <!-- <div class="business-upper-details">
                  详情
                  <div class="details-icon"></div>
                </div> -->
              </div>
              <div class="business-item-below">
                <div class="business-below-left">{{ business.num1 }}</div>
              </div>
            </div>
            <div class="business-item">
              <div class="business-item-upper">
                <div class="business-upper-title">收款金额（实+虚）</div>
              </div>
              <div class="business-item-below">
                <div class="business-below-left">￥{{ business.num2 }}</div>
              </div>
            </div>
            <div class="business-item">
              <div class="business-item-upper">
                <div class="business-upper-title">优惠合计</div>
              </div>
              <div class="business-item-below">
                <div class="business-below-left">￥{{ business.num3 }}</div>
              </div>
            </div>
            <div class="business-item">
            <!-- <div class="business-item" @click="jumpsend"> -->
              <div class="business-item-upper">
                <div class="business-upper-title">赠送金额</div>
                <!-- <div class="business-upper-details">
                  详情
                  <div class="details-icon"></div>
                </div> -->
              </div>
              <div class="business-item-below">
                <div class="business-below-left">￥{{ business.num4 }}</div>
                <div class="business-below-right">
                  {{ business.numright }}次
                </div>
              </div>
            </div>
            
            <div class="business-item">
              <div class="business-item-upper">
                <div class="business-upper-title">订单退款金额</div>
              </div>
              <div class="business-item-below">
                <div class="business-below-left">￥{{ business.num6 }}</div>
              </div>
            </div>
            <div class="business-item">
              <div class="business-item-upper">
                <div class="business-upper-title">挂账金额</div>
              </div>
              <div class="business-item-below">
                <div class="business-below-left">￥{{ business.num8 }}</div>
              </div>
            </div>
            <div class="business-item">
              <div class="business-item-upper">
                <div class="business-upper-title">
                  会员充值/<span class="upper-title-spe">充值人数</span>
                </div>
              </div>
              <div class="business-item-below">
                <div class="business-below-left">
                  ￥{{ business.num5
                  }}<span class="below-left-spe">/{{ business.num51 }}人</span>
                </div>
              </div>
            </div>
            <div class="business-item">
              <div class="business-item-upper">
                <div class="business-upper-title">会员充值退款</div>
              </div>
              <div class="business-item-below">
                <div class="business-below-left">￥{{ business.num7 }}</div>
              </div>
            </div>
           
          </div>
        </div>
        <div class="statistics-container-busDetails">
          <div class="busDetails-title">营业数据详情</div>
          <div class="busDetails-main">
            <!-- <div class="busDetails-main-sales">
              <div class="busDetails-sales-upper">
                <div class="sales-upper-left">
                  <div class="upper-left-title">商品销售统计</div>
                </div>
                <div class="sales-upper-right">
                  <span class="upper-right-title">商品销售额：</span
                  ><span class="upper-right-value">{{ sales.num1 }}</span>
                </div>
              </div>
              <div class="busDetails-sales-below">
                <div class="sales-below-item">
                  <div class="sales-below-value">{{ sales.num2 }}</div>
                  <div class="sales-below-title">商品销售单数</div>
                  <div class="sales-below-line"></div>
                </div>
                <div class="sales-below-item">
                  <div class="sales-below-value">{{ sales.num3 }}</div>
                  <div class="sales-below-title">优惠金额</div>
                  <div class="sales-below-line"></div>
                </div>
                <div class="sales-below-item">
                  <div class="sales-below-value">{{ sales.num4 }}</div>
                  <div class="sales-below-title">商品实收</div>
                </div>
              </div>
            </div> -->
            <div class="busDetails-main-proPoint">
              <div class="proPoint-header">
                <div class="proPoint-header-left">
                  <div class="header-left-title">商品出品点统计</div>
                </div>
                <div class="proPoint-header-right">
                  <span class="header-right-title">总出品数量：</span
                  ><span class="header-right-value">{{ proPointAll }}</span>
                </div>
              </div>
              <div class="proPoint-center">
                <div class="proPoint-center-left">出品点</div>
                <div class="proPoint-center-center">数量</div>
                <div class="proPoint-center-right">金额</div>
              </div>
              <div class="proPoint-footer">
                <!-- <div
                  class="proPoint-footer-item"
                  v-for="(item, index) in proPoint"
                  :key="index"
                  :class="{ active: index === proPoint.length - 1 }"
                  @click="jumpproduct( item)"
                > -->
                <div
                  class="proPoint-footer-item"
                  v-for="(item, index) in proPoint"
                  :key="index"
                  :class="{ active: index === proPoint.length - 1 }"
                >
                  <div class="footer-item-left">{{ item.Name }}</div>
                  <div class="footer-item-center">{{ item.PointCount }}</div>
                  <div class="footer-item-rightSpe">
                    {{ item.PointPrice }}
                    <div class="footer-item-icon"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="busDetails-main-proPoint">
              <div class="proPoint-header">
                <div class="proPoint-header-left">
                  <div class="header-left-title">会员充值统计</div>
                </div>
                <div class="proPoint-header-right">
                  <span class="header-right-title">新增充值会员：</span
                  ><span class="header-right-value">{{ memRechargeAll }}</span>
                </div>
              </div>
              <div class="proPoint-center">
                <div class="proPoint-center-left"></div>
                <div class="proPoint-center-center">单数</div>
                <div class="proPoint-center-right">金额</div>
              </div>
              <div class="proPoint-footer">
                <div class="proPoint-footer-item">
                  <div class="footer-item-left">总充值实收金额</div>
                  <div class="footer-item-center">{{ memCollection.num }}</div>
                  <div class="footer-item-right">
                    {{ memCollection.price }}
                  </div>
                </div>
                <div class="proPoint-footer-item">
                  <div class="footer-item-left">总充值赠送金额</div>
                  <div class="footer-item-center">{{ memCollection.presenAmtNum }}</div>
                  <div class="footer-item-right">
                    {{ memCollection.presenAmtAct }}
                  </div>
                </div>
                <div class="proPoint-footer-item">
                  <div class="footer-item-left">总充值赠送金币</div>
                  <div class="footer-item-center">{{ memCoin.num }}</div>
                  <div class="footer-item-right">
                    {{ memCoin.price }}
                  </div>
                </div>
                <div class="proPoint-footer-item active">
                  <div class="footer-item-left">总充值退款金额</div>
                  <div class="footer-item-center">{{ memRefund.num }}</div>
                  <div class="footer-item-right">
                    {{ memRefund.price }}
                  </div>
                </div>
              </div>
            </div>
            <div class="busDetails-main-sales">
              <div class="busDetails-sales-upper">
                <div class="sales-upper-left">
                  <div class="upper-left-title">会员消费</div>
                </div>
              </div>
              <div class="busDetails-sales-below">
                <div class="sales-below-item">
                  <div class="sales-below-value">{{ memConsumption.num2 }}</div>
                  <div class="sales-below-title">本金消费</div>
                  <div class="sales-below-line"></div>
                </div>
                <div class="sales-below-item">
                  <div class="sales-below-value">{{ memConsumption.MemberPrePayAmt }}</div>
                  <div class="sales-below-title">赠送消费</div>
                  <div class="sales-below-line"></div>
                </div>
                <div class="sales-below-item">
                  <div class="sales-below-value">{{ memConsumption.num4 }}</div>
                  <div class="sales-below-title">金币消费</div>
                </div>
              </div>
            </div>
            <div class="busDetails-main-other">
              <div class="busDetails-other-upper">
                <div class="other-upper-left">
                  <div class="upper-left-title">其它统计</div>
                </div>
              </div>
              <div class="busDetails-other-below">
                <div class="other-below-item">
                  <div class="below-item-upper">
                    <div class="item-upper-left">挂账金额</div>
                    <div class="item-upper-right">{{ other[0].num }}单</div>
                  </div>
                  <div class="below-item-below">
                    <div class="item-below-title">￥{{ other[0].price + other[1].price }}</div>
                  </div>
                </div>
                <div class="other-below-item">
                  <div class="below-item-upper">
                    <div class="item-upper-left">挂账还款</div>
                    <div class="item-upper-right">{{ other[1].num }}单</div>
                  </div>
                  <div class="below-item-below">
                    <div class="item-below-title">￥{{ other[1].price }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="busDetails-main-proPoint">
              <div class="proPoint-header">
                <div class="proPoint-header-left">
                  <div class="header-left-title">收款统计</div>
                </div>
                <div class="proPoint-header-right">
                  <span class="header-right-title">收款总额：</span
                  ><span class="header-right-value">{{ collectionAll }}</span>
                </div>
              </div>
              <div class="proPoint-center">
                <div class="proPoint-center-left">支付方式</div>
                <div class="proPoint-center-center">数量</div>
                <div class="proPoint-center-right">金额</div>
              </div>
              <div class="proPoint-footer">
                <div class="proPoint-footer-item"  v-for="(item, index) in payList" :key="index" >
                  <div class="footer-item-left">{{ item.PayName }}</div>
                  <div class="footer-item-center">
                    {{ item.PayCount }}
                  </div>
                  <div class="footer-item-right">
                    {{ item.PayPrice }}
                  </div>
                </div>
               
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-wrap>
</template>

<script setup>
import Api from '@/api'
import dayjs from 'dayjs'
import ls from '@/lib/ls'
import { transformWorkTime } from '@/utils/chenhao'

import useAppStore from '@/store/app'
const appStore = useAppStore()
const router = useRouter()

const jump = (value1, value2) => {
  router.push({
    path: `/statistics/${value1}`,
    query: { params: value2 }
  })
}

const jumpsend = () => {
  router.push({
    path: `send`,
  })
}

const jumpproduct = (item)=> {
  router.push({
    path: `/statistics/productdetails`,
    query: { ProducePoint: item.ProducePoint , name:item.Name,businessStartTime:postForm.businessStartTime,businessEndTime:postForm.businessEndTime }
  })
}

// 模拟数据
const summaryInfo = ref({
  num1: '',
  num2: '',
  num3: '',
  num4: '',
  num5: ''
})
const business = ref({
  num1:  '',
  num2: '',
  num3: '',
  num4: '',
  numright:  '',
  num5: '',
  num51: '',
  num6: '',
  num7: '',
  num8: ''
})
const sales = ref({
  num1: '',
  num2: '',
  num3: '',
  num4: ''
})
const proPointAll = ref(335)
const proPoint = ref([
  {
    Name: '内吧',
    num: 73,
    price: '13128.89'
  },
  {
    Name: '外吧',
    num: 53,
    price: '42328.89'
  },
  {
    Name: '小吃',
    num: 95,
    price: '52328.89'
  },
  {
    Name: '烧烤',
    num: 23,
    price: '16328.89'
  }
])
const payList = ref([])
const memRechargeAll = ref(65)
const memCollection = reactive({
  num: '',
  price: ''
})
const memGive = reactive({
  num: 33,
  price: '1316.00'
})
const memCoin = reactive({
  num: '',
  price: ''
})
const memRefund = reactive({
  num: '',
  price: ''
})
const memConsumption = ref({
  num2: '',
  num3: '',
  num4: ''
})
const other = reactive([
  {
    num: '',
    price: ''
  },
  {
    num: '',
    price: ''
  }
])
const collectionAll = ref('')
const collection = reactive({
  num: '',
  price: ''
})


// 表单
const postForm = reactive({
  // type: '',
  businessStartTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  businessEndTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1]
})

// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.businessStartTime = startTime
  postForm.businessEndTime = endTime
  loadData(true)
}

//刷新
const restProcess = function () {
  loadData(true)
}


const loadData = async function (refresh = false) {
   //获取营业统计
  await Api.Common.AppObjProcess.Do({
        functionName: 'GetBusinessStatistics',
        contentData: postForm
      }).then(res => {
         console.log(res,'GetBusinessStatistics--------------')
         summaryInfo.value.num1 = res.TotalAmt //营业额  .....
         summaryInfo.value.num2 = res.RealAmt  //实收金额 .....
         summaryInfo.value.num3 = res.ReserveCount  //预约数
         summaryInfo.value.num4 = res.RoomCount  //开台数  ....
         summaryInfo.value.num5 = res.ArrivedPeoperCount  //到店人数 ....
         business.value.num1 = res.OrderCount //总订单数  ....
         business.value.num2 = res.GoodsTotalAmt //订单实收金额  .....
         business.value.num3 = res.DisCountAmt //优惠抹零  ....
         business.value.num4 = res.SignAmt //赠送金额  ....
         business.value.numright = res.SignCount //赠送次数  ....
         business.value.num5 = res.ChargeAct //会员充值总金额  .....
         business.value.num51 = res.RechargePeopleCount //会员充值人数  ....
         business.value.num6 = res.ReturnAmt //订单退款金额 ...
         business.value.num7 = res.ChargeAmtActRet //会员充值退款  ...
         business.value.num8 = res.TotalCreditPrice //挂账金额  ...

        sales.value.num1 = res.TotalAmt //商品销售额 ..
         sales.value.num2 = res.GoodOrderCount //商品销售单数 ..
         sales.value.num3 = res.DisCountAmt //优惠金额 ..
         sales.value.num4 = res.RealAmt //商品实收 ..

         proPointAll.value = res.ProducePointCount  // 总出品数量 ...
         proPoint.value = res.ProducePointList //商品出品点统计列表 ...

         memRechargeAll.value = res.NewMemberCount //新增充值会员 ...
         
         memCollection.num = res.RechargeCount //总充值实收金额单数 ..
         memCollection.price = res.ChargeAct //总充值实收金额 ...
  
         memCollection.presenAmtNum = res.PresenAmtCount //总充值赠送单数 ...
         memCollection.presenAmtAct = res.PresenAmtAct //总充值赠送金额 ...

         memCoin.num = res.CoinsCount //总充值赠送金币单数 ...
         memCoin.price = res.PresenCoinsAct //总充值赠送金币 ...

         memRefund.num = res.RetChargeCount // 充值退款次数 ...
         memRefund.price = res.RetChargeAmt // 充值退款金额 ...

         memConsumption.value.num2 =res.MemberAmt  //本金消费 ...
         memConsumption.value.MemberPrePayAmt = res.MemberPrePayAmt //  赠送消费
         memConsumption.value.num4 =res.CoinsAmt  //金币消费 ...

         other[0].num = res.CreditCount//挂账单位 ...
         other[0].price = res.CreditPrice //挂账金额 ...
         other[1].num = res.PayCreditCount //挂账还款单位 ...
         other[1].price = res.PayCreditPrice //挂账还款 ...

         collectionAll.value = res.TotalPay //收款总额 ...
         payList.value = res.paylist //收款统计 ...

      })
}

const shopInfo = ref({
  name:'青年酒馆',
  imgUrl:''
})
const GetBaseInfo = ()=>{
  Api.Common.AppObjProcess.Do({
      functionName: 'GetBaseConfigInfo',
      contentData: {orgCode:ls.get('ORG_CODE')}
  })
  .then(res=>{
    console.log(res);
    shopInfo.value.name = res.orgName
    shopInfo.value.imgUrl = res.orgLogo
  })
}
GetBaseInfo() // 获取门店配置信息

// 初始化
const onInit = () => {
  loadData(true)
}
onInit()

</script>

<style scoped lang="scss">
@import '@/styles/l.scss';
.statistics-container-top {
  .statistics-container-header {
    padding: 12px 12px 10px;
    display: flex;
    align-items: center;
    .statistics-header-left {
      width: 40px;
      height: 40px;
      margin-right: 6px;
      .img {
        width: 40px;
        height: 40px;
        border-radius: 32px;
        // background-image: url('@/assets/images/common/logo.png');
        // background-repeat: no-repeat;
        // background-position: center center;
        // background-size: contain;
      }
    }
    .statistics-header-right {
      .header-right-upper {
        margin-bottom: 8px;
        div {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 18px;
        }
      }
      .header-right-below {
        display: flex;
        align-items: center;
        .time {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 13px;
          padding-right: 10px;
          border-right: 1px solid #e6e6e6;
        }
        .refresh {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffaa00;
          line-height: 13px;
          padding-left: 10px;
        }
      }
    }
  }
}
.statistics-container {
  .statistics-container-main {
    padding: 10px 12px 50px;

    .statistics-container-summary {
      background: #28282e80;
      box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
      border-radius: 8px;
      padding: 20px 12px;
      .statistics-summary-upper {
        padding-left: 10%;
        padding-right: 10%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding-bottom: 20px;
        border-bottom: 1px solid #383840;
        .summary-upper-left {
          text-align: center;
        }
        .summary-upper-right {
          text-align: center;
        }
        .summary-upper-center {
          position: absolute;
          width: 1px;
          height: 20px;
          right: 50%;
          top: 2px;
          background-image: url('@/assets/images/statistics/i_statistics_line.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 100%;
        }
        .summary-upper-value {
          line-height: 22px;
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffaa00;
          padding-bottom: 13px;
        }
        .summary-upper-title {
          line-height: 13px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }
      }
      @media (min-width: 700px) {
        .statistics-summary-upper {
          padding-left: 15%;
          padding-right: 15%;
        }
      }
      .statistics-summary-below {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .summary-below-item {
          flex-basis: 33.33%;
          text-align: center;
          position: relative;
          .summary-below-line {
            position: absolute;
            width: 1px;
            height: 40px;
            right: 0px;
            top: 12px;
            background-image: url('@/assets/images/common/i_onwine-line.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
          }
        }

        .summary-below-value {
          line-height: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          padding: 12px 0;
        }
        .summary-below-title {
          line-height: 12px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }
      }
    }
    .statistics-container-business {
      .business-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 18px;
        padding: 30px 0 20px;
      }
      .business-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .business-item {
          background: #28282e;
          border-radius: 8px;
          margin-bottom: 10px;
          padding: 16px 12px;
          flex-basis: calc(50% - 5px);
          .business-item-upper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 22px;
            .business-upper-title {
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #ffffff;
              line-height: 16px;
              .upper-title-spe {
                font-size: 13px;
              }
            }
            .business-upper-details {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffaa00;
              line-height: 12px;
              padding-right: 9px;
              position: relative;
              .details-icon {
                width: 5px;
                height: 10px;
                position: absolute;
                right: 0px;
                top: 3px;
                background-image: url('@/assets/svg/common/v_triangle_right_orange.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: contain;
              }
            }
          }
          .business-item-below {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .business-below-left {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #cccccc;
              line-height: 14px;
              .below-left-spe {
                color: #999999;
              }
            }
            .business-below-right {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #cccccc;
              line-height: 14px;
            }
          }
        }
      }
    }
    .statistics-container-busDetails {
      .busDetails-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 18px;
        padding: 20px 0;
      }
      .busDetails-main {
        .busDetails-main-sales {
          background: #28282e;
          border-radius: 8px;
          padding: 18px 0 20px;
          margin-bottom: 10px;
          .busDetails-sales-upper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px 17px;
            border-bottom: 1px solid #383840;
            .sales-upper-left {
              .upper-left-title {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                line-height: 16px;
              }
            }
            .sales-upper-right {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;

              line-height: 14px;
              .upper-right-title {
                color: #999999;
              }
              .upper-right-value {
                color: #ffaa00;
              }
            }
          }
          .busDetails-sales-below {
            padding-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .sales-below-item {
              flex-basis: 50%;
              text-align: center;
              position: relative;
              .sales-below-value {
                line-height: 14px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #fefefe;
                padding-bottom: 12px;
              }
              .sales-below-title {
                line-height: 12px;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #cccccc;
              }
              .sales-below-line {
                position: absolute;
                width: 1px;
                height: 40px;
                right: 0px;
                top: 0px;
                background-image: url('@/assets/images/common/i_onwine-line.png');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
              }
            }
          }
        }

        .busDetails-main-other {
          background: #28282e;
          border-radius: 8px;
          padding: 18px 0 0px;
          margin-bottom: 10px;
          .busDetails-other-upper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px 17px;
            border-bottom: 1px solid #383840;
            .other-upper-left {
              .upper-left-title {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #ffffff;
                line-height: 16px;
              }
            }
          }
          .busDetails-other-below {
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .other-below-item {
              flex-basis: calc(50% - 5px);
              padding: 16px 12px 16px 10px;
              background: #222226;
              border-radius: 8px;
              .below-item-upper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 23px;
                .item-upper-left {
                  padding-left: 2px;
                  line-height: 14px;
                  font-size: 14px;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #fefefe;
                }
                .item-upper-right {
                  line-height: 14px;
                  font-size: 14px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #cccccc;
                }
              }
              .below-item-below {
                .item-below-title {
                  line-height: 14px;
                  font-size: 14px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #cccccc;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
